<template>
  <view class="container">
    <view class="wrapper">
      <u-navbar :is-back="false" title="选择车型"></u-navbar>
      <view class="header-bar">
        <!-- 修改基础信息下拉 -->
        <u-dropdown ref="uDropdown" height="0">
          <u-dropdown-item>
            <QcChoose
              ref="qcChoose"
              @selectTime="$refs.timePickerRef.open"
              @confirm="onChooseChange"
            ></QcChoose>
          </u-dropdown-item>
        </u-dropdown>
        <!-- 顶部展示内容 -->
        <view class="header-inner" @tap="openBasicParamEditor">
          <view class="u-flex u-row-between">
            <view class="flank-item">
              <view class="over-ellipsis fw-700">
                {{ basicParam.address || '-' }}
              </view>
              {{ basicParam.startTime | timeFilter }}
            </view>
            <view class="inner-center">
              <view class="change-btn"> 修改 </view>
              <image
                class="change-icon"
                src="../static/images/edit.png"
                mode=""
              />
              <view>
                {{ diffTimeStr(basicParam.startTime, basicParam.endTime) }}
              </view>
            </view>
            <view class="flank-item u-text-right">
              <view class="over-ellipsis fw-700">
                {{ basicParam.address || '-' }}
              </view>
              {{ basicParam.endTime | timeFilter }}
            </view>
          </view>
        </view>
      </view>
      <!-- 筛选条件 -->
      <view class="sort-bar">
        <FilterPaneTitle
          :open="filterPaneCarModel"
          :dictList="filterCarModelDicts"
          title="车型配置"
          @onTitleClick="onChangeFilterType('model')"
        />
        <FilterPaneTitle
          :open="filterPaneSite"
          :dictList="filterSiteDicts"
          title="门店服务"
          @onTitleClick="onChangeFilterType('site')"
        />
        <FilterPaneTitle
          :open="filterPaneBrand"
          :dictList="filterBrandDicts"
          title="车辆品牌"
          @onTitleClick="onChangeFilterType('brand')"
        />

        <!-- 更改已选活动 -->
        <view class="selected-activity">
          <u-button
            class="custom-button"
            :customStyle="{
              borderColor: basicParam.activeId ? '#19be6b' : '#2979ff',
              backgroundColor: basicParam.activeId ? '#19be6b' : '#2979ff',
            }"
            size="mini"
            type="primary"
            @click="onChangeActivityClick"
            v-if="activeList.length > 0"
            >{{ basicParam.activeId ? "更改活动" : "选择活动" }}</u-button
          >
          <view v-else style="font-size: 12px">所选城市无活动</view>
        </view>
        <!-- 车型配置 -->
        <view class="car-content" v-if="filterPaneCarModel">
          <view class="screen">
            <view class="screen-scroll-w">
              <scroll-view class="screen-scroll-panel" scroll-y>
                <FilterPaneItem
                  title="座位数"
                  :dict="filterCarModelDicts.seatNum"
                >
                  <template #content="{ item }"> {{ item.name }}座 </template>
                </FilterPaneItem>
                <FilterPaneItem
                  title="能源车型"
                  :dict="filterCarModelDicts.fuelType"
                />
                <FilterPaneItem
                  title="档位"
                  :dict="filterCarModelDicts.transmission"
                >
                  <template #content="{ item }"> {{ item.name }}档 </template>
                </FilterPaneItem>
              </scroll-view>
              <view class="screen-line"></view>
              <view class="screen-buttons">
                <view></view>
                <view class="screen-button">
                  <view @click="onFilterReset(filterCarModelDicts)">重置</view>
                  <view @click="onFilterConfirm">完成</view>
                </view>
              </view>
            </view>
          </view>
          <view class="car-back" @click="onFilterConfirm"></view>
        </view>
        <!-- 品牌配置 -->
        <view class="car-content" v-if="filterPaneBrand">
          <view class="screen">
            <view class="screen-scroll-w">
              <scroll-view class="screen-scroll-panel" scroll-y>
                <FilterPaneItem
                  title="品牌"
                  :dict="filterBrandDicts.carBrand"
                />
              </scroll-view>
              <view class="screen-line"></view>
              <view class="screen-buttons">
                <view></view>
                <view class="screen-button">
                  <view @click="onFilterReset(filterBrandDicts)">重置</view>
                  <view @click="onFilterConfirm">完成</view>
                </view>
              </view>
            </view>
          </view>
          <view class="car-back" @click="onFilterConfirm"></view>
        </view>
        <!-- 门店服务 -->
        <view class="car-content" v-if="filterPaneSite">
          <view class="screen">
            <view class="screen-scroll-w">
              <scroll-view class="screen-scroll-panel" scroll-y>
                <FilterPaneItem
                  title="取车方式"
                  :dict="filterSiteDicts.pickUpCar"
                />
                <FilterPaneItem
                  title="商户标签"
                  :dict="filterSiteDicts.supplierTag"
                />
                <FilterPaneItem
                  title="商户"
                  :dict="filterSiteDicts.suppliers"
                />
              </scroll-view>
              <view class="screen-line"></view>
              <view class="screen-buttons">
                <view></view>
                <view class="screen-button">
                  <view @click="onFilterReset(filterSiteDicts)">重置</view>
                  <view @click="onFilterConfirm">完成</view>
                </view>
              </view>
            </view>
          </view>
          <view class="car-back" @click="onFilterConfirm"></view>
        </view>
      </view>
      <!-- 标签 -->
      <view class="label-strip">
        <view class="strip">
          <view
            :class="[item.choose ? 'strip-choose' : '']"
            v-for="(item, index) in tagsList"
            :key="index"
            @click="onTagClick(item)"
            >{{ item.name }}</view
          >
        </view>
      </view>
      <!-- 分割 bar -->
      <view style="width: 100%; height: 20rpx; background: #f9fafd"></view>
      <!-- 报价列表 -->
      <view class="car-lists">
        <view class="car-lists-inner">
          <scroll-view scroll-y class="car-lists-l">
            <view
              :class="['car-type', item.choose ? 'car-type-choose' : '']"
              v-for="(item, index) in carTypeList"
              :key="index"
              @click="onClickSortCarType(item)"
            >
              <view>{{ item.name }}</view>
              <view v-if="item.choose" class="car-type-choose-strip"></view>
            </view>
          </scroll-view>
          <!-- 报价列表 -->
          <RentCarPriceList
            :basicParam="basicParam"
            ref="rentCarPriceListRef"
          />
        </view>
      </view>
    </view>
    <!-- 时间选择器 -->
    <TimePicker
      ref="timePickerRef"
      @confirm="$refs.qcChoose.onPickCarTimeConfirm"
    />
    <!-- 活动选择 -->
    <ActivitySelectModel
      ref="activitySelectModelRef"
      @onCancel="onActivitySelectModelCancel"
      @onConfirm="onActivitySelectModelConfirm"
    />
    <!-- toast -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import QcChoose from "@/components/qc-choose.vue";
import RentCarPriceList from "./compnoents/selectModel/rentCarPriceList.vue";
import FilterPaneItem from "./compnoents/selectModel/filterPaneItem.vue";
import FilterPaneTitle from "./compnoents/selectModel/filterPaneTitle.vue";
import TimePicker from "@/components/time-picker/index.vue";
import ActivitySelectModel from "./compnoents/activitySelectModel.vue";

import dayjs from "dayjs";
import { diffTimeStr } from "@/utils/index.js";
import { getCityNameByCityCode } from "./helper";
import { cityActive, priceQuery } from "@/api/user";

export default {
  data() {
    return {
      // 基础查询条件
      basicParam: {},
      // 筛选条件卡片
      // 车型配置筛选
      filterPaneCarModel: false,
      filterCarModelDicts: {
        seatNum: [], // 座位数
        fuelType: [], // 燃油类型
        transmission: [], // 档位
      },
      // 门店服务筛选
      filterPaneSite: false,
      filterSiteDicts: {
        pickUpCar: [], // 取车方式
        suppliers: [], // 租车公司
        supplierTag: [
          // 供应商标签
          { name: "24小时营业", choose: false },
          { name: "精选标签", choose: false },
          { name: "安心租", choose: false },
          { name: "优选商家", choose: false },
          { name: "全国连锁", choose: false },
        ],
      },
      // 品牌筛选
      filterPaneBrand: false,
      filterBrandDicts: {
        carBrand: [], // 品牌
      },
      // 车辆类型列表
      carTypeList: [],
      // 报价列表
      carPriceList: [],

      // 标签
      tagsList: [],

      // 城市活动列表
      activeList: [],
    };
  },
  filters: {
    // 日期 filter
    timeFilter(val) {
      return val ? dayjs(val).format("YY年MM月DD日 HH:mm") : val;
    },
  },
  components: {
    QcChoose,
    TimePicker,
    RentCarPriceList,
    FilterPaneItem,
    FilterPaneTitle,
    ActivitySelectModel,
  },
  onLoad: async function () {
    const queryParamCatch = uni.getStorageSync("queryParamCatch");
    // 有传入城市等信息
    if (queryParamCatch.cityCode) {
      const options = {
        cityCode: queryParamCatch.cityCode,
        cityName: queryParamCatch.cityName,
        // startTime: "2024-05-24 12:40:00",
        // endTime: "2024-05-26 14:40:00",
        startTime: queryParamCatch.startTime,
        endTime: queryParamCatch.endTime,
        address: queryParamCatch.address,
        longitude: queryParamCatch.longitude,
        latitude: queryParamCatch.latitude,
      };
      // 模拟 options
      // options = {
      //   cityCode: "110100",
      //   cityName: "北京",
      //   startTime: "2024-05-24 12:40:00",
      //   endTime: "2024-05-26 14:40:00",
      //   address: "北京市西城区二龙路27号院",
      //   longitude: 116.36611001989455,
      //   latitude: 39.91230982643943,
      // };
      // 获取code，调用后台接口，更新 cityName 为飞猪的 cityName【start】
      // PS：值可能会对不上
      const cityName = await getCityNameByCityCode(queryParamCatch.cityCode);
      options.cityName = cityName;
      // 获取当前城市cityName，更新传入的 cityName【end】

      // 更新 basicParam
      this.basicParam = options;

      // 获取城市活动列表
      // 获取车型数据
      if (this.basicParam.longitude && this.basicParam.latitude) {
        this.getCityActivityList(() => {
          this.getCarModelList();
        });
      } else {
        this.$refs.uToast.show({
          title: "取还车地址，对应坐标为空，请点击修改重新选择地址",
          duration: 3000,
        });
      }
    } else {
      const startTime = dayjs().add(1, 'day').format('YYYY-MM-DD 08:00:00');
      const endTime = dayjs().add(2, 'day').format('YYYY-MM-DD 08:00:00');
      this.basicParam = {
        startTime: startTime,
        endTime: endTime,
      };
    }
    // 初始化 qcChoose 数据，需要延时获取下，否则人获取不到 this.$refs..
    setTimeout(() => {
      this.$refs.qcChoose.initData(this.basicParam);
      this.$refs.timePickerRef.init(
        this.basicParam.startTime,
        this.basicParam.endTime
      );
    });
  },
  methods: {
    diffTimeStr,
    onFilterReset(dictList) {
      for (var k in dictList) {
        let list = dictList[k];
        list.forEach((item) => (item.choose = false));
      }
    },
    // 点击空白遮罩或点击完成
    onFilterConfirm() {
      this.filterPaneCarModel = false;
      this.filterPaneSite = false;
      this.filterPaneBrand = false;
      this.filterList();
    },
    // 点击标签
    onTagClick(item) {
      item.choose = !item.choose;
      this.filterList();
    },
    // 编辑基本信息
    openBasicParamEditor() {
      this.$refs.uDropdown.open(0);
    },
    // 显示隐藏
    onChangeFilterType(type) {
      if (type == "model") {
        this.filterPaneCarModel = true;
        this.filterPaneSite = false;
        this.filterPaneBrand = false;
      }
      if (type == "site") {
        this.filterPaneCarModel = false;
        this.filterPaneSite = true;
        this.filterPaneBrand = false;
      }
      if (type == "brand") {
        this.filterPaneCarModel = false;
        this.filterPaneSite = false;
        this.filterPaneBrand = true;
      }
    },
    // 点击左侧车辆类型
    onClickSortCarType({ name }) {
      this.carTypeList.forEach((item) => {
        if (item.name == name) {
          item.choose = true;
        } else {
          item.choose = false;
        }
      });
      // 过滤结果展示
      this.filterList();
    },
    onFilterClick(item, list) {
      item.choose = !item.choose;
    },
    // 查询条件发生变化
    onChooseChange(param) {
      Object.assign(this.basicParam, param);
      this.$refs.uDropdown.close(0);
      // 获取城市活动列表
      this.getCityActivityList(() => {
        this.getCarModelList();
      });
    },
    /**
     * 获取过滤的字典数据
     * @param {*} type 车辆信息中的字段
     * @param {*} isShiftAll 是否补入全部
     */
    getFilterDict(typeStr, carList, isShiftAll) {
      let tempList = carList.map((item) => item[typeStr]);
      let listUnique = tempList.filter(
        (item, index, array) => array.indexOf(item) === index
      );
      if (isShiftAll) {
        listUnique.unshift("全部");
      }
      let list = [];
      if (isShiftAll) {
        list = listUnique.map((item) => {
          return {
            name: item,
            choose: item === "全部",
          };
        });
      } else {
        list = listUnique.map((item) => {
          return {
            name: item,
            choose: false,
          };
        });
      }
      return list;
    },
    // 获取城市活动列表
    getCityActivityList(callback) {
      const param = {
        cityCode: this.basicParam.cityCode,
      };
      cityActive(param).then((res) => {
        let result = res.result;
        // 城市活动
        if (result.length > 0) {
          result.forEach((item, index) => {
            if (index == 0) {
              item.active = true;
            } else {
              item.active = false;
            }
          });
          this.activeList = result;
          this.$refs.activitySelectModelRef.open(this.activeList);
        } else {
          this.activeList = [];
          callback();
        }
      });
    },
    // 更改活动
    onChangeActivityClick() {
      this.$refs.activitySelectModelRef.open(this.activeList);
    },
    // 活动点击取消
    onActivitySelectModelCancel() {
      this.getCarModelList();
    },
    // 活动点击确定
    onActivitySelectModelConfirm(active = {}) {
      this.basicParam.activeId = active.activeId;
      // 更新外部数据
      this.activeList.forEach((item) => {
        if (item.id == active.id) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
      this.getCarModelList();
    },
    // 获取车型列表
    getCarModelList() {
      const basicParam = this.basicParam;
      const param = {
        carUseTime: basicParam.startTime,
        carReturnTime: basicParam.endTime,
        pickCityCode: basicParam.cityCode,
        pickAddress: basicParam.address,
        pickLocation: basicParam.longitude + "," + basicParam.latitude,
        returnCityCode: basicParam.cityCode,
        returnAddress: basicParam.address,
        returnLocation: basicParam.longitude + "," + basicParam.latitude,
        activeId: basicParam.activeId,
      };
      if (dayjs(param.carUseTime).isBefore(dayjs())) {
        uni.showToast({
          title: "开始时间应超过当前时间",
          icon: "none",
        });
        return false;
      }
      let apiStart = new Date().getTime();
      priceQuery(param)
        .then((res) => {
          if (res.code == 200) {
            let apiEnd = new Date().getTime();
            console.log("接口加载时长", apiEnd - apiStart);
            const result = res.result;
            const rentCarPrices = result.rentCarPrices;
            const rentCarStores = result.rentCarStores;
            const rentCarSuppliers = result.rentCarSuppliers;
            const rentCars = result.rentCars || [];

            // 车型配置
            // 筛选条件：车辆类型
            this.carTypeList = this.getFilterDict("typeName", rentCars, true);
            // 筛选条件：座位数
            let seatParamList = this.getFilterDict("seatNum", rentCars, false);
            seatParamList.sort((a, b) => {
              return a.name - b.name;
            });
            this.filterCarModelDicts.seatNum = seatParamList;
            // 筛选条件：能源类型
            this.filterCarModelDicts.fuelType = this.getFilterDict(
              "fuelTypeName",
              rentCars,
              false
            );
            // 筛选条件：档位
            this.filterCarModelDicts.transmission = this.getFilterDict(
              "transmissionName",
              rentCars,
              false
            );
            // 筛选条件：品牌
            this.filterBrandDicts.carBrand = this.getFilterDict(
              "autoBrand",
              rentCars,
              false
            );
            // 门店服务
            // 筛选条件：取车方式
            this.filterSiteDicts.pickUpCar = this.getFilterDict(
              "pickUpCarTypeName",
              rentCarPrices,
              false
            );
            // 筛选条件：租车公司
            this.filterSiteDicts.suppliers = this.getFilterDict(
              "name",
              rentCarSuppliers,
              false
            );

            const tags = [];
            rentCarPrices.forEach((item) => {
              // 增加 visible 属性
              item.visible = true;
              // 处理tags
              const tagList = item.tagList;
              tags.push(...tagList);
              // 报价信息，增加 carInfo 字段【车辆信息】
              const carSid = item.carSid;
              const carInfo = rentCars.find((item) => item.sid == carSid);
              if (carInfo) {
                item.carInfo = carInfo;
              } else {
                item.carInfo = {};
              }
              // 报价信息，增加 storeInfo 字段【门店信息】
              const storeSid = item.pickUpStoreSid;
              const storeInfo = rentCarStores.find(
                (item) => item.sid == storeSid
              );
              if (storeInfo) {
                item.storeInfo = storeInfo;
              } else {
                item.storeInfo = {};
              }
              // 报价信息，增加 supplierInfo 字段【供应商信息】
              const supplierId = item.supplierId;
              const supplierInfo = rentCarSuppliers.find(
                (item) => item.id == supplierId
              );
              if (supplierInfo) {
                item.supplierInfo = supplierInfo;
              } else {
                item.supplierInfo = {};
              }
            });
            this.carPriceList = rentCarPrices;
            // 过滤 tags
            const tagsUnique = tags.filter(
              (item, index, array) => array.indexOf(item) === index
            );
            let showTags = [
              "两年内新车",
              "三年内新车",
              "不限里程",
              "免费取消",
              "押金双免",
              "一口价",
            ];
            showTags = showTags.filter((item) => tagsUnique.includes(item));
            this.tagsList = showTags.map((item) => {
              return {
                name: item,
                choose: item == '一口价' ? true : false,
              };
            });
            // 处理商户标签未重置问题
            this.filterSiteDicts.supplierTag.forEach(
              (item) => (item.choose = false)
            );
            // 处理报价
            this.filterList()
            this.$nextTick(() => {
              console.log("页面渲染时长", new Date().getTime() - apiEnd);
            });
          }
        })
        .catch(() => {
          this.carTypeList = [];
          this.carPriceList = [];
          this.tagsList = [];
        });
    },
    // 构建筛选条件 item
    buildParamItem(list, paramKey, param) {
      let nameList = [];
      let choose = list.filter((item) => item.choose && item.name != "全部");
      if (choose.length > 0) {
        nameList = choose.map((item) => item.name);
      }
      let paramVal = nameList.length > 0 ? nameList : "";
      if (paramVal) param[paramKey] = paramVal;
    },
    /**
     * 构建筛选条件
     */
    buildFilterParam() {
      const param = {};
      // 车型
      this.buildParamItem(this.carTypeList, "carType", param);
      // 座位数
      this.buildParamItem(this.filterCarModelDicts.seatNum, "seatNum", param);
      // 燃油类型
      this.buildParamItem(this.filterCarModelDicts.fuelType, "fuelType", param);
      // 档位
      this.buildParamItem(
        this.filterCarModelDicts.transmission,
        "transmission",
        param
      );
      // 品牌
      this.buildParamItem(this.filterBrandDicts.carBrand, "carBrand", param);
      // 取车方式
      this.buildParamItem(this.filterSiteDicts.pickUpCar, "pickUpCar", param);
      // 商户
      this.buildParamItem(this.filterSiteDicts.suppliers, "suppliers", param);
      // 商户标签
      this.buildParamItem(
        this.filterSiteDicts.supplierTag,
        "supplierTag",
        param
      );

      return param;
    },
    // 获取单个报价是否显示
    getCarPriceItemVisible(item, filterParam) {
      let visible = true;
      // 根据 param 过滤
      if (Object.keys(filterParam).length > 0) {
        let breakFlag = false;
        for (var k in filterParam) {
          const val = filterParam[k];
          switch (k) {
            case "carType":
              visible = val.includes(item.carInfo.typeName);
              if (!visible) breakFlag = true;
              break;
            case "seatNum":
              visible = val.includes(item.carInfo.seatNum);
              if (!visible) breakFlag = true;
              break;
            case "fuelType":
              visible = val.includes(item.carInfo.fuelTypeName);
              if (!visible) breakFlag = true;
              break;
            case "transmission":
              visible = val.includes(item.carInfo.transmissionName);
              if (!visible) breakFlag = true;
              break;
            case "carBrand":
              visible = val.includes(item.carInfo.autoBrand);
              if (!visible) breakFlag = true;
              break;
            case "pickUpCar":
              visible = val.includes(item.pickUpCarTypeName);
              if (!visible) breakFlag = true;
              break;
            case "suppliers":
              visible = val.includes(item.supplierInfo.name);
              if (!visible) breakFlag = true;
              break;
            case "supplierTag":
              const tagList = item.tagList;
              if (tagList && tagList.length > 0) {
                visible = val.some((valItem) => tagList.includes(valItem));
              } else {
                visible = false;
                breakFlag = true;
              }
              break;
          }
          if (breakFlag) break;
        }
      }
      // 根据标签过滤
      if (visible) {
        let chooseTags = this.tagsList.filter((item) => item.choose);
        if (chooseTags.length > 0) {
          const tagNames = chooseTags.map((item) => item.name);
          const priceTags = item.tagList;
          // 需包含所有 tag
          visible = !tagNames.some((tagItem) => !priceTags.includes(tagItem));
        }
      }

      return visible;
    },
    // 过滤结果
    filterList() {
      const filterParam = this.buildFilterParam();
      // 过滤报价
      const filterList = [...this.carPriceList].filter((item) => {
        return this.getCarPriceItemVisible(item, filterParam);
      });
      // 初始化数据
      this.$refs.rentCarPriceListRef.initData(filterList);
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header-bar {
  background-color: #ffffff;

  .header-inner {
    background: #f6f7fb;
    padding: 24rpx 32rpx;
    margin: 16rpx 32rpx;

    .inner-center {
      margin: 0 32rpx;
      text-align: center;
      font-size: 22rpx;
      line-height: 18rpx;

      .change-btn {
        font-weight: 500;
        color: #2f86f6;
      }
      .change-icon {
        width: 48rpx;
        height: 8rpx;
      }
    }

    .flank-item {
      flex: 1;
      overflow: hidden;
      font-size: 24rpx;
      color: #55585f;
      line-height: 34rpx;
      .fw-700 {
        font-weight: 700;
        color: #212329;
      }
    }
  }
}

.sort-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16rpx 32rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 9;

  .selected-activity {
    position: absolute;
    right: 16px;
  }
}

.label-strip {
  width: 100%;
  background: #ffffff;

  .strip {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    flex-wrap: wrap;
    view {
      margin-left: 16rpx;
      margin-bottom: 16rpx;
      display: inline-block;
      padding: 12rpx 16rpx;
      background: #f6f7fb;
      border: 1rpx solid #f6f7fb;
      border-radius: 4rpx;
      font-size: 22rpx;
      color: #909399;
    }
    .strip-choose {
      font-weight: 700;
      color: #2f86f6;
      background: #ebf4ff;
      border: 1rpx solid #2f86f6;
    }
  }
}

.car-lists {
  flex: 1;
  width: 100%;
  background: #fff;
  overflow: hidden;
  display: flex;
  .car-lists-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
  }

  .car-lists-l {
    height: 100%;
    width: 140rpx;
    overflow-y: auto;
    white-space: nowrap;
    background: #f6f7fb;

    .car-type {
      width: 100%;
      padding: 24rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      view:nth-child(1) {
        white-space: normal;
        word-break: break-all;
        text-align: center;
        width: 110rpx;
        font-size: 28rpx;
        color: #212329;
      }
      view:nth-child(2) {
        font-size: 24rpx;
        color: #909399;
      }
    }
    .car-type-choose {
      background: #ffffff;
      position: relative;
      view:nth-child(1) {
        font-weight: 700;
      }
      .car-type-choose-strip {
        position: absolute;
        width: 8rpx;
        height: 100%;
        background: #2f86f6;
        top: 0;
        left: 0;
      }
    }
  }
  .car-lists-r {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    white-space: nowrap;
  }
  .empty {
    position: absolute;
    left: 50%;
    top: 128px;
    transform: translateX(-50%);
  }
}

::v-deep .u-drawer-content-visible {
  background-color: transparent !important;
}

.modal-wrap {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100vh;

  .modal-cont {
    padding: 40rpx;
    background-color: #ffffff;
    border-radius: 0px 0px 4px 4px;

    .title-wrap {
      font-size: 32rpx;
      font-weight: 500;
      color: #1f2334;
      line-height: 44rpx;
      margin-bottom: 10rpx;
      // margin-bottom: 40rpx;
    }
  }
}

.car-content {
  z-index: 8;
  height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 32px;

  .car-back {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
  }
  .screen {
    z-index: 2;
    width: 100%;
    max-height: 960rpx;
    .screen-scroll-w {
      background: #fff;
      width: 100%;
      height: 100%;

      .screen-scroll-panel {
        background: #fff;
        width: 100%;
        max-height: 400px;
        overflow: auto;
        .scroll-panel {
          margin: 32rpx 32rpx 16rpx;
          background: #fff;
          .scroll-panel-name {
            font-size: 24rpx;
            color: #212329;
            font-weight: 700;
          }
          .scroll-panel-i {
            display: inline-block;
            width: 31%;
            margin-right: 2%;
            background: #f6f7fb;
            border: 2rpx solid #f6f7fb;
            font-size: 24rpx;
            color: #55585f;
            min-height: 64rpx;
            padding-top: 16rpx;
            padding-bottom: 16rpx;
            text-align: center;
            margin-top: 16rpx;
          }
          .scroll-panel-i:nth-child(3n + 1) {
            margin-right: 0 !important;
          }
          .active {
            background: #ebf4ff;
            color: #2f86f6;
            font-weight: 700;
          }
        }
      }

      .screen-line {
        width: 100%;
        height: 2rpx;
        transform: scaleY(0.5);
        background: #ebedf0;
      }
      .screen-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        view:nth-child(1) {
          font-size: 24rpx;
          color: #55585f;
          margin-left: 32rpx;
        }
        .screen-button {
          height: 96rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          view {
            padding: 10rpx 32rpx;
            border: 2rpx solid #dcdee0;
            border-radius: 4rpx;
          }
          view:nth-child(1) {
            color: #55585f;
            font-size: 28rpx;
            background: #fff;
          }
          view:nth-child(2) {
            margin: 0 32rpx 0 16rpx;
            color: #fff;
            font-size: 28rpx;
            background-image: linear-gradient(
              to right,
              #252a3b 0%,
              #444a61 100%
            );
          }
        }
      }
    }
  }
}
</style>
